<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm"   :inline="true">
            <el-form-item label="菜单名称" class="item" prop="menuName">
                <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable style="width: 240px"
                          @keyup.enter.native="load"/>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="Search" @click="load">搜索</el-button>
                <el-button icon="refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <!--按钮区域    -->
        <div style="margin:5px">
            <el-button type="primary" plain icon="plus" @click="handleAdd">新增</el-button>
        </div>

        <!-- 菜单列表区-->
        <el-table :data="tableData" row-key="menuName"  :header-cell-style="{background:'#eef1f6',color:'#606266'}"  :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" style="width: 100%">
            <el-table-column prop="menuName" label="菜单名称"></el-table-column>
            <el-table-column prop="icon" label="菜单图标">
                <template #default="scope" >
                    <div v-if="scope.row.icon!='#'">
                        <svg-icon  :name="scope.row.icon"/>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="component" label="组件路径"></el-table-column>
            <el-table-column fixed="right" label="操作" width="260">
                <template #default="scope">
                    <div>
                        <el-button type="text" icon="edit" @click="handleUpdate(scope.row)" >修改</el-button>
                        <el-button type="text" @click="handleAdd(scope.row)" icon="plus">新增</el-button>
                        <!-- 自带提示框的删除按钮 -->
                        <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small" icon="delete" type="text">删除</el-button>
                                <!-- 注意此处如果方法加在删除按钮上，那么在弹出提示框点击确定的时候就无法执行删除操作了，所以这里需要将删除的方法，挂到弹框的确定按钮上 -->
                            </template>
                        </el-popconfirm>
                    </div>
                </template>

            </el-table-column>
        </el-table>

        <!-- 新增菜单弹窗 -->
        <el-dialog :title="title" v-model="dialogVisible" width="600px" >
            <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="item">
                <el-form-item label="上级菜单:" >
                    <tree-select  :value="form.parentId" :options="menuOptions"
                            :objMap="{
                               value: 'menuId',
                               label: 'menuName',
                               children: 'children'}"
                            placeholder="选择上级菜单" style="width:85%"/>
                </el-form-item>

                <el-form-item label="菜单名称:" prop="menuName" >
                    <el-input v-model="form.menuName" style="width:85%"></el-input>
                </el-form-item>

                <el-form-item label="菜单类型:" prop="menuType" >
                    <el-radio-group v-model="form.menuType">
                        <el-radio   label="1">目录</el-radio>
                        <el-radio   label="2">菜单</el-radio>
                        <el-radio   label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="菜单图标:" v-if="form.menuType!='3'">
                    <el-input v-model="form.icon" style="width:85%"></el-input>
                </el-form-item>

                <el-form-item label="是否外链:" prop="isFrame" v-if="form.menuType!='3'">
                    <el-radio-group v-model="form.isFrame">
                        <el-radio  label="0">是</el-radio>
                        <el-radio  label="1">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="菜单路由:" v-if="form.menuType!='3'" prop="path">
                    <el-input v-model="form.path" style="width:85%"></el-input>
                </el-form-item>

                <!-- 选择菜单的时候才显示 -->
                <el-form-item label="组件路径:" v-if="form.menuType=='2'">
                    <el-input v-model="form.component" style="width:85%"></el-input>
                </el-form-item>

                <el-form-item label="权限标识:" v-if="form.menuType!='1'">
                    <el-input v-model="form.perms" style="width:85%"></el-input>
                </el-form-item>

            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="submitForm" >确 定</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
    import TreeSelect from '@/components/TreeSelect'
    import request from "@/utils/request";
    import {ElMessage} from "element-plus";
    import SvgIcon from "../../components/SvgIcon";

    export default {
        name: 'Menu',
        components: {SvgIcon, TreeSelect },
        data() {
            return {
                title: '',
                dialogVisible: false,
                total: 0,  //默认10条
                tableData: [],
                single: true,
                //vue_treeSelect
                menuOptions: [],
                // 查询参数
                queryParams: {
                    menuName: undefined,
                },
                menuType: "1",
                isFrame: "1",
                form: {},
                rules: {
                    menuName: [
                        /*{ required: true, message: "菜单名称不能为空", trigger: "blur" }*/
                    ],
                    path: [
                        { required: true, message: "路由地址不能为空", trigger: "blur" }
                    ]
                }
            }
        },

        //页面加载完立即执行的方法
        mounted() {
            this.load()
        },

        methods:{
            //查询方法
            load() {
                //axios中 get请求无法传递复杂json对象需要使用qs.stringify()对参数进行序列化
                request.get("/sys/menu/menuTree", {
                    params: {
                        menuName: this.queryParams.menuName,
                    },
                }).then(res => {
                    if (res.code == 0) {
                        this.tableData = res.data
                        this.total = res.data.total
                    }

                })
            },

            //新增菜单弹窗
            handleAdd(row){
               this.reset()
               this.getTreeSelect();
                if (row != null && row.menuId) {
                    this.form.parentId = row.menuId;
                } else {
                    this.form.parentId = undefined;
                }
                this.dialogVisible = true;
                this.title = '添加菜单';
            },

            //点击修改按钮
            async handleUpdate(row){
                this.reset()
                await this.getTreeSelect();
                request.get("/sys/menu/selectByMenuId/"+row.menuId).then(res =>{
                    this.form=res.data;
                    this.title='修改菜单';
                    this.dialogVisible=true;
                });


            },


            /** 查询菜单下拉树结构 */
            getTreeSelect() {
                this.menuOptions = [];
                request.get("/sys/menu/menuTree").then(res => {
                    const rootMenu = { menuId: 0, menuName:'根目录',  children:[]}
                    rootMenu.children=res.data;
                    this.menuOptions.push(rootMenu);
                });
            },


            //提交
            submitForm(){
                this.$refs["form"].validate(valid =>{
                    if(valid){
                        if (this.form.menuId){
                            request.post("/sys/menu/updateMenu",this.form).then(res =>{
                                if(res.code==0){
                                    ElMessage.success('修改成功');
                                    this.load();  //更新完成后，重新刷新表格数据
                                    this.dialogVisible = false;    //最后关闭弹窗
                                }
                            })
                        }else{
                            request.post("/sys/menu/addMenu", this.form).then(res => {
                                if (res.code === 0) {
                                    ElMessage.success('保存成功');
                                    this.load();  //重新刷新表格数据
                                    this.dialogVisible = false;    //最后关闭弹窗
                                }
                            })
                        }
                    }
                })
            },


            //删除菜单
            handleDelete(row){
                const menuId=row.menuId;
                request.delete("/sys/menu/delMenu/"+menuId).then(res =>{
                    if (res.code === 0) {
                        ElMessage.success('删除成功');
                        this.load();  //重新刷新表格数据
                    }
                });
            },

            //新增弹框的时候重置一下表单（特指弹框的表单）
            reset() {
                this.form = {
                    menuId: undefined,
                    parentId:undefined,
                    menuType:"1",
                    isFrame:"1"
                }
                this.$resetForm('form');
            },

            //搜索区域表单重置
            resetQuery(){
                this.$resetForm('queryForm');
                this.load();
            }


        }
    }
</script>

<style scoped>

    .svg-icon {
        fill: currentColor;
        height: 15px;
        width: 15px;
    }
</style>


